<template>
  <div
    id="gantt_here"
    style="width: 100%; height: 100%; position: relative"
  ></div>
</template>
<script>
import gantt from 'dhtmlx-gantt';

import 'dhtmlx-gantt/codebase/skins/dhtmlxgantt_contrast_black.css';

export default {
  data() {
    return {};
  },
  mounted() {
    gantt.i18n.setLocale('cn');
    gantt.config.columns = [
      { name: 'text', label: 'Task name', tree: true, width: '*' },
      { name: 'add', width: 44 },
    ];
    gantt.config.date_format = '%Y-%m-%d %H:%i';
    gantt.config.scales = [
      { unit: 'month', step: 1, format: '%Y年%m月%j日' },
      { unit: 'hour', step: 1, format: '%H' },
    ];
    gantt.config.task_date = '%Y-%m-%d %H:%i';
    gantt.templates.task_date = function (date) {
      const res = gantt.date.date_to_str(gantt.config.task_date)(date);
      console.log(res);
      return res;
    };
    gantt.config.lightbox = {
      sections: [
        {
          name: 'description',
          height: 70,
          map_to: 'text',
          type: 'textarea',
          focus: true,
        },
        {
          name: 'time',
          type: 'time',
          map_to: 'auto',
          time_format: ['%Y', '%m', '%d', '%H', '%i'],
        },
      ],
    };

    gantt.config.duration_unit = 'minute';
    console.log(gantt.config);
    gantt.init('gantt_here');

    gantt.parse({
      data: [
        {
          id: 1,
          text: '任务一',
          start_date: '2018-04-01 00:00',
          progress: 0.4,
          open: true,
        },
        {
          id: 2,
          text: '一营',
          start_date: '2018-04-01 10:00',
          end_date: '2018-04-01 16:00',
          progress: 0.6,
          parent: 1,
        },
        {
          id: 3,
          text: '二营',
          start_date: '2018-04-01 22:00',
          end_date: '2018-04-02 22:00',
          progress: 0.6,
          parent: 1,
        },
      ],
    });
  },
};
</script>

